<template>
   <view class="flex-column-view">
		<view class="bg-color"></view>
		<view class="user-card">
			<view class="line-1"></view>
			<view class="line-2"></view>
			<view class="dashed">
				<nut-divider dashed></nut-divider>
			</view>
			<view v-if="tkDetail?.tkLabel" class="certification">
				<image src="/src/static/mine/certification.png" mode="aspectFill"></image>
				<text>拓客认证</text>
			</view>
			<image class="avatar" :src="userInfo?.avatarUrl || '/src/static/mine/default-avatar.png'" mode="aspectFill"></image>
			<view class="name">
				<text>{{ userInfo?.nickname }}</text>
				<!-- <image class="edit" src="/src/static/mine/edit-icon.png" mode="aspectFill"></image> -->
			</view>
			<view class="desc">{{ userInfo?.signature }}</view>
		</view>
		<view class="menu-card">
			<view class="flex-1">
				<navigator url="/pages/order/list/index" class="item-bar">
					<image class="icon" src="/src/static/mine/order-icon.png" mode="aspectFill"></image>
					<view class="label">我的订单</view>
					<nut-icon name="rect-right" custom-color="#BFBFBF"></nut-icon>
				</navigator>
				<navigator url="/pages/mine/receiveRecord/index" class="item-bar">
					<image class="icon" src="/src/static/mine/pickUp-icon.png" mode="aspectFill"></image>
					<view class="label">领取记录</view>
					<nut-icon name="rect-right" custom-color="#BFBFBF"></nut-icon>
				</navigator>
				<navigator class="item-bar" @click="toIndex">
					<image class="icon" src="/src/static/mine/tour-icon.png" mode="aspectFill"></image>
					<view class="label">游览历史</view>
					<nut-icon name="rect-right" custom-color="#BFBFBF"></nut-icon>
				</navigator>
				<navigator v-if="!tkDetail?.tkLabel" url="/pages/mine/certification/index" class="item-bar">
					<image class="icon" src="/src/static/mine/certification-icon.png" mode="aspectFill"></image>
					<view class="label">拓客认证</view>
					<nut-icon name="rect-right" custom-color="#BFBFBF"></nut-icon>
				</navigator>
			</view>
			<!-- <view class="complaint">我要投诉</view> -->
		</view>
   </view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { useUserStore } from '@/store/user';
import { getTkDetailApi } from '@/api/public';
import { ref } from 'vue';
import storage from '@/utils/storage';

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

const tkDetail = ref({})

const getTkDetail = async () => {
	try {
		const res = await getTkDetailApi()
		tkDetail.value = res.data
	} catch {
	}
}

onShow(() => {
	userStore.getUserInfo()
	getTkDetail()
})

const toIndex = () => {
	storage().set('index_tabValue', '2')
	uni.switchTab({
		url: '/pages/index/index'
	})
}
</script>

<style lang="scss" scoped>
	.bg-color {
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		height: 400rpx;
		background: linear-gradient(180deg, #DBFFF6 0%, #F3F3F3 100%);
	}
	.user-card {
		position: relative;
		margin: 230rpx 20rpx 20rpx;
		border-radius: 0 0 20rpx 20rpx;
		background-color: #fff;
		.line-1 {
			border: 2rpx solid #000;
		}
		.line-2 {
			border: 8rpx solid #5EFFE4;
		}
		:deep(.dashed .nut-divider) {
			margin: 0;
			color: #000;
		}
		.certification {
			position: absolute;
			left: 16rpx;
			top: 40rpx;
			width: 166rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4rpx;
			border-radius: 10rpx;
			background-color: #434341;
			image {
				width: 34rpx;
				height: 28rpx;
			}
			text {
				color: #FBD180;
				font-size: 28rpx;
				font-weight: 700;
			}
		}
		.avatar {
			position: absolute;
			left: 50%;
			top: -40rpx;
			transform: translateX(-50%);
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
		}
		.name {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			margin: 90rpx 0 30rpx;
			text {
				font-size: 32rpx;
				font-weight: 700;
			}
			.edit {
				width: 18rpx;
				height: 22rpx;
			}
		}
		.desc {
			text-align: center;
			color: #757575;
			margin-bottom: 54rpx;
		}
	}
	.menu-card {
		overflow: hidden;
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.item-bar {
			display: flex;
			align-items: center;
			height: 120rpx;
			padding: 0 60rpx 0 76rpx;
			.icon {
				width: 54rpx;
				height: 54rpx;
				margin-right: 30rpx;
			}
			.label {
				flex: 1;
				font-size: 28rpx;
			}
		}
		.complaint {
			text-align: center;
			color: #737373;
			margin-bottom: 30rpx;
		}
	}
</style>
